<template>
  <ul class="list-b-8" v-if="data">
    <li v-for="item in extractPaths(data)">
      <slot name="item" :row="item" v-if="$slots.item" />
      <p v-else>{{ item }}</p>
    </li>
  </ul>
</template>
<script setup lang="ts">
import { onMounted, getCurrentInstance, onUnmounted } from 'vue';
const { proxy } = getCurrentInstance() as any;
const props = withDefaults(
  defineProps<{
    data?: object;
  }>(),
  {
  },
);
const extractPaths = (obj: object, currentPath: string = '') => {
  let paths: any = [] = [];
  for (let key in obj) {
    if (obj.hasOwnProperty(key)) {
      let newPath = currentPath ? `${currentPath}.${key}` : key;
      if (typeof obj[key] === 'object' && obj[key] !== null && !Array.isArray(obj[key])) {
        paths = paths.concat(extractPaths(obj[key], newPath));
      } else {
        paths.push({
          title: newPath,
          key: key,
          value: obj[key],
        });
      }
    }
  }

  return paths;
}
onMounted(() => { });
onUnmounted(() => { });
</script>
<style scoped lang="scss"></style>
